<template>
	<div class="navHeader anquantop">
		<div class="nav_box">
			<div class="back_icon_box" @click="back">
				<i class="back_icons">
					<svg viewBox="0 0 20.413 12.425" width="1em"height="1em" fill="currentColor" aria-hidden="true" focusable="false">
						<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite">
							
						</use>
					</svg>
				</i>
			</div>
			<div class="title">{{ title }}
			<p v-if="conTitle" style="color:  var(--theme-text-color-lighten);font-size: 12px;">{{conTitle}}</p></div>
			<div style="width: 40px;"></div>
			<div class="right_text" v-if="conTitleTow">{{conTitleTow}}</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'navHeader',
		props: {
			title: { type: String,  default: '' },
			conTitle: { type: String,  default: '' },
			conTitleTow: { type: String,  default: '' },
			rightShow: { type: Boolean, default: false },
			rightText: { type: String,  default: '' },
			rightPath: { type: String, default: '' },
			backCount: { type: Number, default: -1 },
		},
		methods:{
			back(){
				this.$router.go(this.backCount)
			}
		}
	}
</script>

<style lang="less">
	.navHeader {
		width: 100vw;
		background: var(--theme-main-bg-color);
    border-bottom: 0.01rem solid var(--theme-color-line);
		// background-color: var(--theme-bg-color);
		// border-bottom: none;
		padding: 0.2rem;
		// border-bottom: thin solid var(--theme-color-line);
		.nav_box {
			display: flex;
			align-items: center;
			.back_icon_box {
				width: 0.8rem;
				color: var(--theme-text-color);
				font-size: .4rem;
			}
			.title {
				color: #fff;
				font-size: .3rem;
				text-align: center;
				flex: 1;
			}
			.right_text {
				font-size: .24rem;
				right: 0.3rem;
				color: var(--theme-primary-color);
				position: absolute;
				right: 0.3rem;
			}
		}
		
	}
</style>